import React, { useEffect, useState } from "react";
import { LockOutlined, UserOutlined } from "@ant-design/icons";
import { Button, Checkbox, Form, Input } from "antd";
import styles from "./index.module.scss";
import { localStorageSetItem, sessionStorageSetItem } from "@/utils/localStorage";
import { useNavigate } from "react-router-dom";
import Cookie from "js-cookie";
import { getAuthLogin, getServerList } from "@/service";
import { encrypt } from "@/utils";

const formData = {
  username: "admin",
  password: "123456",
};

const App = ({setIsLogin}:any) => {
  const navigateTo = useNavigate();
  const { loginFormBox, loginFormButton, formTitle } = styles;
  const [loadings, setLoadings] = useState<boolean[]>([]);
  const [verification, setVerification] = useState<{ img: string; uuid: string }>({
    img: '',
    uuid: ''
  })

  useEffect(() => {
    getVerificationInfo()
  }, [])

  const getVerificationInfo = async () => {
    const res = await getServerList()
    if (res) {
      setVerification(res)
    }

  }

  const onFinish = async (values: any) => {
    const res = await getAuthLogin({ ...values, uuid: verification?.uuid, password: encrypt(values?.password) })
    sessionStorageSetItem("token", res?.token);

    setLoadings([true]);

    navigateTo("/");
  };

  return (
    <div className={`${loginFormBox} global-center`}>
      <Form
        name="normal_login"
        className="login-form"
        initialValues={{ remember: true }}
        onFinish={onFinish}
      >
        <h1 className={`${formTitle} global-center`}>登录</h1>
        <Form.Item
          name="username"
          rules={[{ required: true, message: "请填写账号！" }]}
          initialValue={formData.username}
        >
          <Input
            prefix={<UserOutlined className="site-form-item-icon" />}
            placeholder="账号"
          />
        </Form.Item>
        <Form.Item
          name="password"
          rules={[{ required: true, message: "请填写密码！" }]}
          initialValue={formData.password}
        >
          <Input
            prefix={<LockOutlined className="site-form-item-icon" />}
            type="password"
            placeholder="密码"
          />
        </Form.Item>
        <div style={{ display: 'flex' }}>
          <img src={verification?.img} style={{ height: 30, marginRight: 10, cursor: 'pointer' }} onClick={() => getVerificationInfo()} />
          <Form.Item
            name="code"
            rules={[{ required: true, message: "请填写验证码！" }]}
          >
            <Input
              placeholder="验证码"
            />
          </Form.Item>
        </div>
        {/* <Form.Item>
          <div
            className="global-center"
            style={{ justifyContent: "space-between" }}
          >
            <Form.Item name="remember" valuePropName="checked" noStyle>
              <Checkbox>记住账号密码</Checkbox>
            </Form.Item>
          </div>
        </Form.Item> */}
        <Form.Item>
          <Button
            type="primary"
            htmlType="submit"
            className={loginFormButton}
            loading={loadings[0]}
          >
            登录
          </Button>

          {/* <span style={{ float: 'right' }}>
          Or <a href="">register now!</a>
          </span> */}
        </Form.Item>
        <div style={{display: 'flex', justifyContent: 'end'}}><a onClick={() => setIsLogin(false)}>还没有账号？去注册</a></div>
      </Form>
    </div>
  );
};

export default App;
